<template>
<div class="big_box">
    <!-- 顶部滑动条 -->
			
			
		
		<div class="fixed_box">
			<van-sticky>
				<div id="slider" class="mui-slider position">
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a :class="['mui-control-item', item.id==0?'mui-active':'']" v-for="(item, index) in classification" :key="index" @click="getPhotoList(item.id)">
								{{item.title}}
							</a>
						</div>
					</div>
				</div>
			</van-sticky>
		</div>
			


<!--下面的圖片展示  -->

	
			<ul class="photo-list">
				<router-link v-for="item in photo_list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
					<img :src="item.img_url">
					<div class="info">
						<h1 class="info-title">{{ item.title }}</h1>
						<div class="info-body">{{ item.zhaiyao }}</div>
					</div>
				</router-link>
			</ul>

    </div>




</template>

<script>
import  '../../lib/mui/js/mui.min.js'
import {Toast} from 'mint-ui'

// 导入mui，使用js文件。但是在导入的时候会报严格模式的错误
// bundle.js是默认使用严格模式的，但是这个mui是没有用到严格模式的。在发生冲突的下的解决方法：
// 1、改mui为严格模式（但是不现实，毕竟不是自己写的）
// 2、改bundle.js为非严格模式（去下载插件，然后配置）
    // 下载： npm install babel-plugin-transform-remove-strict-mode -D
    // 然后再.babelrc中配置：
    //     {
    //   "plugins": ["transform-remove-strict-mode"]
    //     }
    // 具体网址参考：
    // https://github.com/genify/babel-plugin-transform-remove-strict-mode
    // 
// mui('.mui-scroll-wrapper').scroll({
// 	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// });


export default{
	name:'photo_list',
	data(){
		return{
			cartId:0,//剛進來的，默認等於0，就是全部。
			photo_list:[],//圖片
			classification:[],
			
		}
	},
	mounted(){
		//生命周期的钩子函数，当组件中的dom结构被渲染好了之后，会执行这个钩子函数
		// 如果要操作元素，最好放在mounted函数中，因为这时候的dom元素是最新的。
		// 所以將mui的配置挪到這裡來。
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
	},
	methods:{
		// 獲得圖片分享
		getPhotoList(cateId){
			this.$axios.get('api/getimages/'+cateId)
			.then(response=>{
				console.log(response.data);
				this.photo_list=response.data.message;
				
				Toast({
					message:'获取图片成功',
					duration:500
				})
				
			})
			.catch(c=>{
				console.log(error);
				Toast({
					message:'获取图片失败',
					duration:500
				})
			})
		},
		// 獲得分類
		getClassification(){
			this.$axios.get('api/getimgcategory')
			.then(response=>{
				console.log(response.data);
				this.classification=response.data.message;
				this.classification.unshift({id:0 , title:'全部'})
				Toast({
					message:'获取分類成功',
					duration:500
				})
			})
			.catch(c=>{
				console.log(error);
				Toast({
					message:'获取分類失败',
					duration:500
				})
			})
		}
	},
	created() {
		this.getClassification();
		this.getPhotoList(0);
	}
}
</script>

<style lang="scss" scoped>
*{
	touch-action:pan-y;
}
.big_box{
	padding-top: 40px;
}
.sticky{
	position:-webkit-sticky;
	position: sticky;
	top: 0px;
}

.photo-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  padding-bottom: 0;
  li {
    background-color: #ccc;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 0 9px #999;
    position: relative;
    img {
      width: 100%;
      vertical-align: middle;
	  height: 400px;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }

    .info {
      color: white;
      text-align: left;
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      max-height: 84px;
      .info-title {
        font-size: 14px;
      }
      .info-body {
        font-size: 13px;
      }
    }
  }
}
.fixed_box{
	position:fixed;
	top: 40px;
	z-index: 99;
	background-color: white;
}

</style>